<template>
  <div class="message_box">
    <li class="wrening">
      <Icon icon="jinggao"></Icon>
      <span>留言说明：</span> <br />
      <span
        >请如实填写您的邮箱，否则您将无法及时收到回复的消息！并且所有字数必须大于2.</span
      >
    </li>

    <li class="other_1">
      <label>
        <span class="red">*</span> 昵称：<input
          type="text"
          placeholder="请输入您的昵称"
          v-model="nick"
      /></label>
      <label
        ><span class="red">*</span> 邮箱：<input
          type="text"
          placeholder="请输入您的邮箱"
          v-model="email"
        />
      </label>
    </li>

    <li class="other_2">
      <span class="red">*</span> 内容：
      <textarea
        cols="30"
        rows="10"
        placeholder="说点什么吧"
        v-model="con"
      ></textarea>
    </li>

    <li class="other_3">
      <button @click="submit">提交</button> <button @click="reset">重置</button>
    </li>

    <div class="message">
      <li class="message_span">留言</li>
      <template v-if="!comment_render_data"><Loading></Loading></template>
      <template v-else>
        <template v-for="item in comment_render_data" :key="item.id">
          <Message :obj="item"></Message>
        </template>
      </template>
    </div>
  </div>
</template>
<script>
import { ref, computed, onMounted } from "vue";
import Icon from "../../components/IconFont";
import Message from "../../components/Message/index.vue";
import { useRouter } from "vue-router";
import { Axios } from "../../axios";
import Loading from "../../components/loading";
import { getCurrentTime, getWeb } from "../../util/isWebBor";
export default {
  components: {
    Icon,
    Message,
    Loading,
  },
  setup() {
    let id = useRouter().currentRoute.value.params.id || -1;
    let comment_render_data = ref(0);
    let nick = ref("");
    let email = ref("");
    let con = ref("");
    let submit = async () => {
      if (nick.value == "" || email.value == "" || con.value == "") {
        alert("请检查为空项.");
        return false;
      }
      if (
        !email.value.includes("@") ||
        !email.value.includes(".") ||
        !email.value.includes("com")
      ) {
        alert("请检查邮箱格式.");
        return false;
      }
      let web = getWeb();
      let time = getCurrentTime();
      let header = nick.value[0].toLocaleUpperCase();
      let ins = await Axios({
        url: "/comment/addComment",
        method: "post",
        data: {
          obj: {
            content: con.value,
            nick: nick.value,
            header,
            email: email.value,
            time,
            other: web,
            projectAndArticleId: id,
          },
        },
      });
      reset();
      get_data();
      message();
    };
    let reset = () => {
      nick.value = "";
      email.value = "";
      con.value = "";
    };
    let get_data = async () => {
      comment_render_data.value = 0;
      let comment_data = (
        await Axios({
          url: "/comment/getIdContent",
          method: "post",
          data: {
            id,
          },
        })
      ).data.data.ins;

      comment_data.map((it) => {
        let str = it.other;
        if (str.includes(",")) {
          it.other = str.split(",");
        } else {
          it.other = [it.other];
        }
      });

      comment_render_data.value = comment_data;
    };
    let message = async () => {
      await Axios({
        url: "/comment/lookup",
        method: "post",
        data: {
          id,
        },
      });
    };
    onMounted(() => {
      get_data();
    });

    return {
      comment_render_data,
      nick,
      email,
      con,
      submit,
      reset,
      get_data,
      message,
    };
  },
};
</script>

<style lang="less">
@import url("../../assets/global/var.less");

.message_box {
  padding: 20px;
  overflow: hidden;
  margin-top: 120px;
  width: 100%;
  transition: all 0.5s;
  .global_border_shadow ();
  .red {
    color: red;
    margin-left: 10px;
  }
  li {
    list-style: none;
  }
  .wrening {
    color: @navigation_bar_content_color;
    border-bottom: 1px solid #ccc;
    line-height: 2em;
    padding-bottom: 10px;
  }
  .wrening .icon {
    font-size: 20px;
    color: red;
    padding-right: 5px;
  }
  .other_1 {
    width: 100%;
    height: 65px;
    line-height: 65px;
    font-size: 14px;
    color: @title_color;
    padding-top: 20px;
  }
  .other_1 input {
    width: 435px;
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-left: 5px;
    outline: none;
    padding-left: 15px;
    padding-right: 15px;
    background-color: rgba(255, 255, 255, 0.2);
    &:focus {
      border: 1px solid @navigation_bar_content_active_color;
    }
  }
  .other_2 {
    font-size: 14px;
    color: @title_color;
    vertical-align: top;
    margin-top: 15px;
  }
  textarea {
    width: 81%;
    max-width: 85%;
    vertical-align: top;
    border: 1px solid #ccc;
    border-radius: 4px;
    outline: none;
    padding: 10px;
    line-height: 1.5em;
    background-color: rgba(255, 255, 255, 0.2);
    &:focus {
      border: 1px solid @navigation_bar_content_active_color;
    }
  }
  .other_3 {
    padding-left: 70px;
    padding-top: 20px;
  }
  button {
    width: 70px;
    height: 40px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    &:nth-of-type(1) {
      border: 1px solid @navigation_bar_content_active_color;
      background-color: @navigation_bar_content_active_color;
      color: #fff;
    }
    &:nth-of-type(2) {
      background-color: #fff;
      border: 1px solid #ccc;
      color: @title_color;
    }
  }
  .message {
    position: relative;
    margin-top: 50px;
    min-height: 10vh;
  }
  .message_span {
    color: @navigation_bar_content_color;
  }
}
</style>